<style>.limit article { max-height:75px; }</style>
  <!-- slide start -->
  <div id="slide" class="container slide">
    <ul>
      <tag:houseSlide id="vo">
        <li><a href="javascript:void(0)"><img src="{$vo.img}"></a></li>
      </tag:houseSlide>
    </ul>
  </div>
  <script>
    GH.load("js", "js-slide", "__COMMON__/js/slide.js", function(){
      utuoSlide("slide");
    });
  </script>
  <!-- slide end -->
  
<div id="list" class="container pl10 pr10">
  <tag:houseConfig id="vo">
  <section class="section mt10 auto limit">
    <header>{$vo.name}</header>
    <article>{$vo.content}</article>
    <footer class="tc">展开</footer>
  </section>
  </tag:houseConfig>
</div>

<script>
  var footers = document.querySelectorAll("#list footer");
  for( var i=0, l = footers.length; i < l; i++) {
    footers[i].onclick = function() {
      var article = this.parentNode.getElementsByTagName('article')[0];
      if ( this.innerHTML == "展开" ){
        article.style.maxHeight = "9999px";
        this.innerHTML = "收起";
      } else {
        article.style.maxHeight = "75px";
        this.innerHTML = "展开";
      }
    }
  }
</script>
